<template>
	<div class="zh-new-video">
		<nav-header>
			<template slot="menuBefore">
				<li>
					<router-link to="/resources/video/video-list" tag="a">视频列表</router-link>
				</li>
				<li class="gap">&gt;</li>
			</template>
		</nav-header>
		<div class="zh-batch-upload" v-loading="loading.status" :element-loading-text="loading.txt">
			<div class="zh-import-comter">
				<el-button plain @click="downloadDemo()">下载模板</el-button>
				<uploader :options="uploadOptions" :autoStart="false" ref="uploader" :file-status-text="statusText"
					@files-submitted="fileSubmit" @file-removed="fileRemoved" @file-success="fileSuccess" @file-error="fileFail"
					class="uploader-example">
					<uploader-unsupport></uploader-unsupport>
					<uploader-btn :directory="false" :single="true" :attrs="attrs" v-if="selectFileShow">选择文件</uploader-btn>
					<uploader-list v-if="!selectFileShow"></uploader-list>
				</uploader>
				<el-button type="primary" v-if="!selectFileShow" @click="fileUpload" style="margin-top: 10px;">确定导入</el-button>
			</div>
			<div class="zh-import-text">
				<p>注意事项: </p>
				<p>1、格式支持：只支持 zip 格式。 </p>
				<!-- <p>2、Excel表数据从的第二行开始有效。其中<span>视频名称、授课老师账号、视频信息、学段、年级</span>为必填项，不能错误，否则会导致失败。</p> -->
				<p>2、压缩包中的视频文件名不能有特殊字符串，否则会导致识别不出来该视频文件。</p>
				<p>3、Excel表格数据中标红的字段为必填项，不能错误，否则会导致失败。</p>
				<p>4、批量上传的视频文件，需要和video.xlsx表格放在同个文件夹直接打包为zip格式的压缩包。</p>
			</div>
			<div class="zh-import-table">
				<p>例：</p>
				<div class="zh-table">
					<div class="zh-table-contents">
						<el-table :data="importData" border style="width: 100%" :header-cell-style="required">
							<el-table-column prop="1" label="视频名称" align="center" show-overflow-tooltip>
							</el-table-column>
							<el-table-column prop="2" label="视频分类" align="center" show-overflow-tooltip>
							</el-table-column>
							<el-table-column prop="3" label="主讲人" align="center" show-overflow-tooltip>
							</el-table-column>
							<el-table-column prop="4" label="关键字（逗号隔开）" align="center" show-overflow-tooltip>
							</el-table-column>
							<el-table-column prop="5" label="视频须知" align="center" show-overflow-tooltip>
							</el-table-column>
							<el-table-column prop="6" label="视频简介" align="center" show-overflow-tooltip>
							</el-table-column>
							<el-table-column prop="7" label="是否下载" align="center" show-overflow-tooltip>
							</el-table-column>
							<el-table-column prop="8" label="上传视频名称" align="center" show-overflow-tooltip>
							</el-table-column>
						</el-table>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import { uploaderFileFail, longTimeMessage } from './../../../tools/tool';

export default {
	data() {
		return {
			loading: {
				status: false,
				txt: '获取数据...',
			},
			messageObj: {},
			statusText: {
				success: '上传成功',
				error: '上传出错',
				uploading: '正在上传...',
				paused: '暂停',
				waiting: '等待上传'
			},
			selectFileOrNot: false,  //是否选中文件
			uploadOrNot: false, 		//是否已经上传
			uploadInfo: {
				file_name: '',
				file_path: '',
				file_size: 0
			},
			attrs: {
				// accept: ['application/vnd.ms-excel','application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']
			},
			uploadOptions: {
				target: this.BASE_URL + '/api/resource/res_upload',
				testChunks: false,
				headers: { Authorization: `Bearer ` + this.$g.access_token },
			},
			fileList: [],
			rules: {
			},
			rowsum: '',
			selectFileShow: true,//是否显示选择文件按钮
			uploadRetryTimes: 100,//文件最大重传次数
			importData: [
				{
					1: "时间管理与效率提升1",
					2: "职业化课程",
					3: "李娜",
					4: "时间管理，效率提升",
					5: "视频须知",
					6: "视频简介",
					7: "是",
					8: "时间管理与效率提升1.mp4",
				},
				{
					1: "时间管理与效率提升2",
					2: "职业化课程",
					3: "李娜",
					4: "时间管理，效率提升",
					5: "视频须知",
					6: "视频简介",
					7: "是",
					8: "时间管理与效率提升2.mp4",
				},
				{
					1: "时间管理与效率提升3",
					2: "职业化课程",
					3: "李娜",
					4: "时间管理，效率提升",
					5: "视频须知",
					6: "视频简介",
					7: "是",
					8: "时间管理与效率提升3.mp4",
				},
			],
		}
	},
	created() {
		this.getrowSum()

	},
	methods: {
		required(row, column, rowIndex, columnIndex) {

			// console.log(row.columnIndex)
			if (row.columnIndex == 0) {
				return "color:red;"
			}
			if (row.columnIndex == 2) {
				return "color:red;"
			}
			if (row.columnIndex == 7) {
				return "color:red;"
			}
			// console.log(rowcolumn)



		},
		downloadDemo() {
			this.export_excel('api/video/video_zip_demo', {}, '批量上传模板', 'zip');
		},
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					if (this.selectFileOrNot) {
						this.fileUpload();
					} else {
						this.resourceSave();
					}
				} else {
					return false;
				}
			});
		},
		resourceSave() {
			let resourceParam = {};
			if (this.uploadOrNot) {
				resourceParam.path = this.uploadInfo.file_path;
			}
			let success = (data => {
				this.loading.status = false;
				this.$message.success(data.msg);

				setTimeout(() => {
					this.$router.push('/resources/video/video-list');
				}, 1000);
			})
			let fail = (res => {
				this.loading.status = false;

				longTimeMessage(this, res, 15000);
			})

			this.$ajax.post('api/video/vue_video_zip', resourceParam, { func: { success: success, fail: fail } })
		},
		//上传成功的事件  
		fileSuccess(rootFile, file, message, chunk) {
			this.selectFileShow = true;
			var mess = eval('(' + message + ')');
			mess = handleResponseData(mess);

			if (parseInt(mess.data.status) === 1) {
				this.uploadOrNot = true;
				this.uploadInfo.file_name = mess.data.file_name;
				this.uploadInfo.file_path = mess.data.file_path;
				this.uploadInfo.post_fix = mess.data.post_fix;
				this.resourceSave();
			}

			this.loading.status = true;
			Uploader.removeFile(file);
		},
		fileFail(rootFile, file, message, chunk) {
			uploaderFileFail(this, Uploader, file, message);
		},
		getrowSum() {
			let success = res => {
				this.rowsum = Number(res.data[5])
				
				console.log(this.rowsum)
			}
			this.$ajax.get('api/system/system_info', { params: {}, func: { success: success, } })
		},

		//文件添加到上传队列后触发 -- 过滤文件格式
		fileSubmit(files, fileList, event) {



			for (var i = 0; i < fileList.length; i++) {
				let temp = fileList[i].name.toLowerCase().split('.');
				let tempname = temp[temp.length - 1];

				this.uploadInfo.file_size = fileList[i].size;
				console.log(this.uploadInfo.file_size,this.rowsum)
				if (this.uploadInfo.file_size * 3 > this.rowsum*8) {
					// console.log(this.uploadInfo.file_size,this.rowsum)
					this.$message.warning('服务器空闲空间不足')
					Uploader.removeFile(fileList[i]);
				}
				if (tempname != 'zip') {
					this.$message.warning('只允许上传 ZIP 格式的文件')
					Uploader.removeFile(fileList[i]);
				} else {
					if (Uploader.fileList.length > 1) {
						Uploader.removeFile(Uploader.fileList[0]);
					}

					
					this.selectFileOrNot = true;
					this.selectFileShow = false;
				}
			}
		},
		fileRemoved(file) {
			this.selectFileOrNot = false;
			this.selectFileShow = true;
		},
		fileUpload() {
			// 开始或继续上传
			Uploader.upload();
		},

	},
	mounted() {
		// 获取uploader对象  
		// 获取上传成功之后的response
		this.$nextTick(() => {
			window.Uploader = this.$refs.uploader.uploader
		})
	},
	destroyed(to, from, next) {
		this.$message.closeAll();
	},
}
</script>

<style lang="scss">
.zh-batch-upload {
	.zh-import-comter {
		margin-top: 20px;
	}

	.uploader-example {
		margin-top: 20px;
	}

	.zh-import-text {
		font-size: 12px;
		color: #999;
		line-height: 30px;
		margin: 20px;

		p {
			margin: 0;
		}

		span {
			color: red;
		}
	}

	.zh-import-table {
		p {
			font-size: 16px;
			margin-bottom: 20px;
		}
	}

	.uploader-list {
		.uploader-file-pause {
			display: none !important;
		}

		.uploader-file-status {
			text-indent: 0;
		}
	}
}
</style>